<template>
    <div class="box">
        <el-select :disabled="setAttr('disabled', false)" v-model="modelValue" :size="setAttr('componentSize', 'large')" :placeholder="setAttr('placeholder', '请选择')" :multiple="setAttr('multiple', false)">
            <el-option v-for="item in JSON.parse(item.attribute.selectData.extendData)" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
    </div>
</template>

<script>
import { toRef } from 'vue'
export default {
    name: 'Select',
    props: {
        item: {
            type: Object,
            default: function () {
                return {}
            }
        },
        value: null
    },
    setup(props) {
        let item = toRef(props, 'item')
        // 设置属性
        function setAttr(name, value = '') {
            return Object.prototype.hasOwnProperty.call(item.value.attribute, name) ? item.value.attribute[name].value : value
        }

        return {
            setAttr
        }
    },
    emits: ['update:modelValue'],
    data() {
        return {
            modelValue: []
        }
    },
    watch: {
        'item.attribute.multiple.value': {
            handler(item) {
                // 处理多选的切换
                if (item) {
                    this.value.indexOf(',') > -1 ? (this.modelValue = this.value.split(',')) : (this.modelValue = [this.value])
                } else {
                    if (Array.isArray(this.value) && this.value.length > 0) {
                        this.modelValue = this.value[0]
                    } else {
                        this.modelValue = []
                    }
                }
            },
            deep: true
        },
        value: {
            handler(v) {
                // 处理多选的切换
                if (Object.prototype.hasOwnProperty.call(this.item.attribute, 'multiple') && this.item.attribute['multiple'].value) {
                    if (Array.isArray(v)) {
                        this.modelValue = v
                    } else {
                        let tmep = []
                        v.indexOf(',') > -1 ? (this.modelValue = v.split(',')) : (this.modelValue = [v])
                    }
                } else {
                    this.modelValue = v
                }
            },
            deep: true,
            immediate: true
        },
        modelValue: {
            handler(v) {
                this.$emit('update:modelValue', { value: v })
            },
            deep: true
        }
    },
    methods: {},
    mounted() {}
}
</script>

<style></style>
